웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
제이쿼리의 toggleClass() 메소드 매우 자주 사용됩니다. 이 메소드를 사용하면 원하는 요소에 새로운 클래스를 추가하거나 제거하기를 매우 쉽고 간단하게 반복할 수 있습니다.
toggleClass()는 설정된 클래스명을 해당하는 요소가 가지고 있는지 판단하여 해당 요소가 있으면 이를 제거합니다. 반대로 해당 요소가 없다면 이를 부여하는 매우 유용한 메소드입니다. 간단한 사용방법은 아래와 같습니다.
element.toggleClass('클래스명')
[ 1 ] toggleClass() 예제소스 코드 보기
<html>
<head>
<style type="text/css">
.red { color: #f00; }
</style>
</head>
<body>
<p id='test' class='red'>Class name red!</p>
<button id='testbt'>Click</button>
</body>
<script type="text/javascript">
$('#testbt').click(function() {
$('#test').toggleClass('red');
})
</script>
</html>
<head>
<style type="text/css">
.red { color: #f00; }
</style>
</head>
<body>
<p id='test' class='red'>Class name red!</p>
<button id='testbt'>Click</button>
</body>
<script type="text/javascript">
$('#testbt').click(function() {
$('#test').toggleClass('red');
})
</script>
</html>
위 예제를 보시는 일반적으로 많이 사용되는 예제의 모습입니다. toggleClass()는 클릭 이벤트와 많이 사용되는데 동일한 클릭이 반복실행될 경우 스위치 효과인 토글 이벤트 효과를 나타내기 위해 사용할 수 있습니다
위 예제의 .p태그는 class명 red를 가지고 있습니다. 그리고 스크립트를 실행하게 되면 red 클래스명은 이미 있기 때문에 가지고 있던 red 클래스명은 삭제됩니다. 만약 위 함수를 다시 실행하면 red 클래스명이 없기 때문에 다시 나타나게 됩니다. 실행 결과는 아래와 같습니다.
Class name red!
위 버튼을 직접 클릭해보세요.
# toggleClass()는 언제 사용해야 하는가?
사실 자바스크립트에서 특정 요소에 스타일을 직접 추가하거나 제거할 수 있습니다. 예를들어...
<script>
$('testEle').css('color', 'red');
// 스크립트를 사용한 변경 예제
</script>
$('testEle').css('color', 'red');
// 스크립트를 사용한 변경 예제
</script>
하지만 스타일과 스크립트를 명확히 구분하여 코드를 작성하는 것이 좋기 때문에 가급적 toggleClass()를 사용해 스타일은 CSS에서 변경할 수 있도록 분리 후 사용하는 것이 좋은 방법입니다. 게다가 스크립트에 스타일을 사용할 경우 코드가 길어져 가독성 역시 좋지 않습니다.
아래의 글도 찾고 계시지 않나요?